<%--
  Created by IntelliJ IDEA.
  User: l
  Date: 2019/12/31
  Time: 3:37
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="${pageContext.request.contextPath }/css/cont.css">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath }/layui/css/layui.css" />

    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">

    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.js"></script>

    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath }/layui/layui.js" media="all" ></script>
    <style type="text/css">
        .carousel-inner{
            text-align: center;

            width:100%;
            height: 400px;
        }
        .carousel-inner1{
            text-align: center;

            width:100%;
            height: 300px;
        }
        .dd{
            text-align: center;
            color: #367BA7;
            font-family: "微软雅黑";
            margin-top: 30px;
            line-height: 30px;

        }
        .dd2{
            width: 80%;
            height: 500px;
            margin: auto;
            border: 1px red solid;
        }

        .gstx{
            border-radius: 50%;
        }

    </style>
</head>
<body>
<div >
    <ul class="layui-nav" lay-filter="demo">
        <li class="layui-nav-item" style="margin-left: 60px;"><a href="index.html"> <img src="${pageContext.request.contextPath }/img/logo.png"style="height: 60px;width: 150px;margin-left: 30px;"/></a></li>
        <li class="layui-nav-item" style="float: right;">
            <a href="javascript:;"  style="color: deepskyblue;font-size: 20px;font-family: '微软雅黑';">
                <img src="#" class="layui-nav-img">用户登陆</a>
            <dl class="layui-nav-child">
                <dd><a href="#"  style="color: deepskyblue;font-size: 15px;font-family: '微软雅黑';">修改信息</a></dd>
                <dd><a href="#"  style="color: deepskyblue;font-size: 15px;font-family: '微软雅黑';">安全管理</a></dd>
                <dd><a href="#"  style="color: deepskyblue;font-size: 15px;font-family: '微软雅黑';">退了</a></dd>
            </dl>
        </li>
        <li class="layui-nav-item" style="float: right;">
            <a href=""  style="color: deepskyblue;font-size: 20px;font-family: '微软雅黑';">个人中心<span class="layui-badge-dot"></span></a>
        </li>
        <li class="layui-nav-item" style="float: right;">
            <a href=""  style="color: deepskyblue;font-size: 20px;font-family: '微软雅黑';">控制台<span class="layui-badge">9</span></a>
        </li>
    </ul>
</div>

<div style="width: 100%; height: 50px;float:left; background-color: ghostwhite; ">
    <div class="container">
        <div class="row"  style="margin-top:15px;font-size: 17px;">
            <div class="col-lg-1"></div>
            <div class="col-lg-2"><a href="${pageContext.request.contextPath}index">首页</a></div>
            <div class="col-lg-2"><a href="${pageContext.request.contextPath}/userSingerLogin">歌手</a></div>
            <div class="col-lg-2"><a href="${pageContext.request.contextPath}/userMV">MV</a></div>
            <div class="col-lg-2"><a href="${pageContext.request.contextPath}/songTypeLogin">歌曲分类</a></div>
            <div class="col-lg-2"><a href="${pageContext.request.contextPath}/ticketLogin">票务</a></div>
            <div class="col-lg-1"></div>
        </div>
    </div>
</div>
<div style="line-height: 10px;">&nbsp;</div>

<div class="container">
    <div class="row" style="line-height: 50px;">
        <div class="col-lg-11" style="text-align: center;">
            <a href="#" style="margin-right: 15px;margin-bottom: 15px;background-color: deepskyblue;padding: 5px;color: white;">热门推荐</a>
            <a href="#" style="margin-right: 15px;margin-bottom: 15px;">A</a>
            <a href="#" style="margin-right: 15px;margin-bottom: 15px;">B</a>
            <a href="#" style="margin-right: 15px;margin-bottom: 15px;">C</a>
            <a href="#" style="margin-right: 15px;margin-bottom: 15px;">D</a>
            <a href="#" style="margin-right: 15px;margin-bottom: 15px;">F</a>
            <a href="#" style="margin-right: 15px;margin-bottom: 15px;">G</a>
            <a href="#" style="margin-right: 15px;margin-bottom: 15px;">H</a>
            <a href="#" style="margin-right: 15px;margin-bottom: 15px;">I</a>
            <a href="#" style="margin-right: 15px;margin-bottom: 15px;">J</a>
            <a href="#" style="margin-right: 15px;margin-bottom: 15px;">L</a>
            <a href="#" style="margin-right: 15px;margin-bottom: 15px;">M</a>
            <a href="#" style="margin-right: 15px;margin-bottom: 15px;">N</a>
            <a href="#" style="margin-right: 15px;margin-bottom: 15px;">O</a>
            <a href="#" style="margin-right: 15px;margin-bottom: 15px;">P</a>
            <a href="#" style="margin-right: 15px;margin-bottom: 15px;">Q</a>
            <a href="#" style="margin-right: 15px;margin-bottom: 15px;">R</a>
            <a href="#" style="margin-right: 15px;margin-bottom: 15px;">S</a>
            <a href="#" style="margin-right: 15px;margin-bottom: 15px;">T</a>
            <a href="#" style="margin-right: 15px;margin-bottom: 15px;">U</a>
            <a href="#" style="margin-right: 15px;margin-bottom: 15px;">V</a>
            <a href="#" style="margin-right: 15px;margin-bottom: 15px;">W</a>
            <a href="#" style="margin-right: 15px;margin-bottom: 15px;">X</a>
            <a href="#" style="margin-right: 15px;margin-bottom: 15px;">Y</a>
            <a href="#" style="margin-right: 15px;margin-bottom: 15px;">Z</a>
        </div>
    </div>

    <div class="row" style="line-height: 50px;">
        <div class="col-lg-6" style="text-align: center;margin-left: 24px;">
            <a href="#" style="margin-right: 15px;margin-bottom: 15px;background-color: deepskyblue;padding: 5px;color: white;">全部</a>
            <a href="#" style="margin-right: 15px;margin-bottom: 15px;">内地</a>
            <a href="#" style="margin-right: 15px;margin-bottom: 15px;">港台</a>
            <a href="#" style="margin-right: 15px;margin-bottom: 15px;">欧美</a>
            <a href="#" style="margin-right: 15px;margin-bottom: 15px;">日本</a>
            <a href="#" style="margin-right: 15px;margin-bottom: 15px;">韩国</a>
            <a href="#" style="margin-right: 15px;margin-bottom: 15px;">其他</a>
        </div>
    </div>

    <div class="row" style="line-height: 50px;">
        <div class="col-lg-4" style="text-align: center;margin-left: 35px;">
            <a href="#" style="margin-right: 15px;margin-bottom: 15px;background-color: deepskyblue;padding: 5px;color: white;">全部</a>
            <a href="#" style="margin-right: 15px;margin-bottom: 15px;">男</a>
            <a href="#" style="margin-right: 15px;margin-bottom: 15px;">女</a>
            <a href="#" style="margin-right: 15px;margin-bottom: 15px;">组合</a>
        </div>
    </div>

    <div class="row" style="line-height: 50px;">
        <div class="col-lg-8" style="text-align: center;margin-left: 78px;">
            <a href="#" style="margin-right: 15px;margin-bottom: 15px;background-color: deepskyblue;padding: 5px;color: white;">全部</a>
            <a href="#" style="margin-right: 15px;margin-bottom: 15px;">流行</a>
            <a href="#" style="margin-right: 15px;margin-bottom: 15px;">嘻哈</a>
            <a href="#" style="margin-right: 15px;margin-bottom: 15px;">摇滚</a>
            <a href="#" style="margin-right: 15px;margin-bottom: 15px;">电子</a>
            <a href="#" style="margin-right: 15px;margin-bottom: 15px;">民谣</a>
            <a href="#" style="margin-right: 15px;margin-bottom: 15px;">R&B</a>
            <a href="#" style="margin-right: 15px;margin-bottom: 15px;">民歌</a>
            <a href="#" style="margin-right: 15px;margin-bottom: 15px;">轻音乐</a>
            <a href="#" style="margin-right: 15px;margin-bottom: 15px;">爵士</a>
            <a href="#" style="margin-right: 15px;margin-bottom: 15px;">古典</a>
            <a href="#" style="margin-right: 15px;margin-bottom: 15px;">乡村</a>
            <a href="#" style="margin-right: 15px;margin-bottom: 15px;">蓝调</a>
        </div>
    </div>

    <div class="row" style="margin-top: 50px;text-align: center;">
        <div class="col-lg-1">&nbsp;</div>
        <div class="col-lg-2">
            <a href="#"> <img src="${pageContext.request.contextPath }/img/gs1.jpg" width="150px" class="gstx"></a>
            <a href="#"><p style="line-height: 50px;">G.E.M 邓紫棋</p></a>
        </div>

        <div class="col-lg-2">
            <a href="#"> <img src="${pageContext.request.contextPath }/img/gs2.jpg" width="150px" class="gstx"></a>
            <a href="#"><p style="line-height: 50px;">周杰伦</p></a>
        </div>
        <div class="col-lg-2">
            <a href="#"> <img src="${pageContext.request.contextPath }/img/gs3.jpg" width="150px" class="gstx"></a>
            <a href="#"><p style="line-height: 50px;">薛之谦</p></a>
        </div>

        <div class="col-lg-2">
            <a href="#"> <img src="${pageContext.request.contextPath }/img/gs4.jpg" width="150px" class="gstx"></a>
            <a href="#"><p style="line-height: 50px;">李荣浩</p></a>
        </div>
        <div class="col-lg-2">
            <a href="#"> <img src="${pageContext.request.contextPath }/img/gs5.jpg" width="150px" class="gstx"></a>
            <a href="#"><p style="line-height: 50px;">林俊杰</p></a>
        </div>
        <div class="col-lg-1">&nbsp;</div>

    </div>

    <div class="row" style="margin-top: 50px;text-align: center;">
        <div class="col-lg-1">&nbsp;</div>
        <div class="col-lg-2">
            <a href="#"> <img src="${pageContext.request.contextPath }/img/gs6.jpg" width="150px" class="gstx"></a>
            <a href="#"><p style="line-height: 50px;">Taylor Swift</p></a>
        </div>

        <div class="col-lg-2">
            <a href="#"> <img src="${pageContext.request.contextPath }/img/gs7.jpg" width="150px" class="gstx"></a>
            <a href="#"><p style="line-height: 50px;">Avril Lavigne</p></a>
        </div>
        <div class="col-lg-2">
            <a href="#"> <img src="${pageContext.request.contextPath }/img/gs8.jpg" width="150px" class="gstx"></a>
            <a href="#"><p style="line-height: 50px;">The Chainsmokers</p></a>
        </div>

        <div class="col-lg-2">
            <a href="#"> <img src="${pageContext.request.contextPath }/img/gs9.jpg" width="150px" class="gstx"></a>
            <a href="#"><p style="line-height: 50px;">容祖儿</p></a>
        </div>
        <div class="col-lg-2">
            <a href="#"> <img src="${pageContext.request.contextPath }/img/gs10.jpg" width="150px" class="gstx"></a>
            <a href="#"><p style="line-height: 50px;">Vicetone</p></a>
        </div>
        <div class="col-lg-1">&nbsp;</div>

    </div>
</div>
<div class=""></div>




<p style="line-height: 20px;">&nbsp;</p>
<div style="background-color: #333333;height: 350px;width: 100%;">
    <div class="container">
        <div class="row">
            <div class="col-lg-7"  style="line-height: 50px;font-size: 15px;padding: 30px;">
                <p style="color:#999999;">下载音律客户端</p>
                <p>
                    <a href="#"><span class="fa fa-windows" style="font-size:48px;color:#999999;margin-left: 15px;"></span></a>
                    <a href="#"><span class="fa fa-android" style="font-size:48px;color:#999999;margin-left: 30px;"></span></a>
                    <a href="#"><span class="fa fa-apple" style="font-size:48px;color:#999999;margin-left: 30px;"></span></a>
                </p>
                <p style="line-height: 20px;color:#999999;">
                    <span style="font-size: 15px;">Windows版</span>
                    <span style="font-size: 15px;">Android版</span>
                    <span style="font-size: 15px;margin-left: 15px;">Ios版</span>
                </p>
            </div>
            <div class="col-lg-5" style="line-height: 40px;font-size: 15px;padding: 20px;">
                <p style="color: #999999;">联系我们</p>
                <p>
                    <span style="margin: 20px;"><img src="${pageContext.request.contextPath }/img/Y.jpg" width="100px"></span>
                    <span style="margin: 20px;"><img src="${pageContext.request.contextPath }/img/COCO.png" width="100px"></span>
                    <span style="margin: 20px;"><img src="${pageContext.request.contextPath }/img/吴春耀.jpg" width="100px"></span>
                </p>
            </div>
        </div>
    </div>



    <p style="line-height:50px ;">&nbsp;</p>
    <div style="text-align: center;color: #999999;">
        <p>关于音律 | About MySoul | 服务条款 | 用户服务协议 | 隐私政策 | 权利声明 | 广告服务 | 腾讯招聘 | 客服中心 | 网站导航</p>
        <p>Copyright © 1998 - 2019 Tencent. All Rights Reserved.</p>
        <p>MySoul公司 版权所有 MySoul网络文化经营许可证</p>
    </div>
</div>




<script src="layui/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>
    layui.use('element', function(){
        var element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块

        //监听导航点击
        element.on('nav(demo)', function(elem){
            layer.msg(elem.text());
        });
    });
</script>
</body>
</html>